<template>
	<view style="overflow: hidden;">
		<!-- 自定义导航栏 -->
		<uni-nav-bar left-icon="arrowleft" @clickLeft="back" :statusBar="true" rightText="发布" @clickRight="submit">
			<view class="m-f-jcc nav-flex" @click="changelook">
				<text>{{getType}}</text>
				<view class="icon iconfont icon-xialazhankai"></view>
			</view>
		</uni-nav-bar>
		<!-- 多行输入框 -->
		<view class="uni-textarea">
			<textarea v-model="text" placeholder="留下你的脚印吧" />
		</view>
		<!-- 上传多图 -->
		<upload-images @upload="upload" @del="delImageList" :image-list="imglist"></upload-images>
		<!-- 弹出公告 -->
		<uni-popup id="popup" ref="popup" type="center">
			<view class="popup-content">
				<view class="m-f-jcc img-content">
					<image src="../../static/common/add-input.png" mode="widthFix"></image>
				</view>
				<view class="text-pad">
					<view>1.涉及黄色，政治，广告及骚扰信息</view>
					<view>2.涉及人身攻击</view>
					<view>3.留联系方式，透露他人隐私</view>
					<view>一经核实将被封禁，情节严重者永久封禁</view>
				</view>
				<button type="default" class="btn-con" @tap="closePopup">朕知道了</button>
			</view>
		</uni-popup>
		<!-- 底部 -->
		<view class="m-f-ac addinput-foot">
			<picker mode="selector" :range="postclass.range" @change="changePostClass" class="m-f1 m-f-jcc">
				<view class="m-f1 m-f-jcc">{{postclass.title ? postclass.title : '选择分类'}}</view>
			</picker>
			<view class="m-f1 m-f-jcc" hover-class="addinput-foot-btn" @tap="changeTopic">
				{{topic.title ? topic.title : '选择话题'}}
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	import uploadImages from '../../components/common/upload-images.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				isget: false,
				yinsi: 1,
				changeLooks: ['仅自己可见', '所有人可见'],
				text: '',
				imglist: [],
				imglistIds: [],
				postclass: {
					id: 0, // 当前选中分类id
					title: '', // 当前选中分类名称
					range: [], // 可选项
					list: [] // 服务端获取到的分类列表
				},
				topic: {
					id: 0, // 当前选中话题id
					title: '' // 当前选中话题名称
				},
			}
		},
		components: {
			uniNavBar,
			uploadImages,
			uniPopup
		},
		computed: {
			getType() {
				return this.changeLooks[this.yinsi]
			}
		},
		onReady() {
			// 页面打开自动打开对话框
			setTimeout(() => {
				this.$refs.popup.open()
			}, 100)
		},
		onBackPress() { // 监听 页面返回（保存草稿）
			// 如果有值
			if (!this.text && this.imglist.length < 1) return
			if (!this.isget) {
				this.baocun()
				return true
			}
		},
		onLoad(e) {
			// 读取缓存
			let res = uni.getStorageSync('addinput')
			if (res) {
				res = JSON.parse(res)
				this.yinsi = res.yinsi
				this.imglistIds = res.imglistIds || []
				if (this.imglistIds.length) {
					this.imglist = res.imglist
				}
				this.text = res.text
				if (res.postclass) {
					this.postclass = res.postclass
				}
				if (res.topic) {
					this.topic = res.topic
				}
			}
			// 获取文章分类
			let postclass = e.postclass ? JSON.parse(e.postclass) : false
			this.getPostClass(postclass)
			// 监听所属话题选择
			uni.$on('changeTopic', (data) => {
				this.topic.id = data.id
				this.topic.title = `#${data.title}#`
			})
		},
		methods: {
			async getPostClass(postclass) {
				if (postclass) {
					this.postclass.list = postclass
					let arr = []
					postclass.forEach(item => {
						arr.push(item.name)
					})
					return this.postclass.range = arr
				}
				try{
					let [err, res] = await this.$http.get('/postclass')
					if (!this.$http.errorCheck(err, res)) return
					let list = res.data.data.list
					let arr = [], arr2 = []
					list.forEach(ele => {
						arr.push(ele.classname)
						arr2.push({
							id: ele.id,
							name: ele.classname
						})
					})
					this.postclass.range = arr
					this.postclass.list = list
				}catch(e){ return }
			},
			changePostClass(e) {
				// 当前选中的id
				this.postclass.id = this.postclass.list[e.target.value].id
				// 当前选中的名称
				this.postclass.title = this.postclass.list[e.target.value].name
			},
			changeTopic() {
				uni.navigateTo({
					url: '../topic-nav/topic-nav?ischange=' + true
				})
			},
			baocun() { // 保存为草稿
				uni.showModal({
					content: '是否要保存为草稿？',
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						if (res.confirm) {
							// 本地存储
							let obj = {
								yinsi: this.yinsi,
								text: this.text,
								imglist: this.imglist,
								imglistIds: this.imglistIds,
								postclass: this.postclass,
								topic: this.topic
							}
							console.log(obj.imglist)
							uni.setStorageSync('addinput', JSON.stringify(obj))
						} else {
							uni.removeStorage({ key: 'addinput' }) // 清除缓存
						}
						this.isget = true
						uni.navigateBack({
							delta: 1
						})
					},
				})
			},
			back() { // 返回
				uni.navigateBack({
					delta: 1
				})
			},
			submit() { // 发布
				console.log('发布')
			},
			changelook() { // 隐私
				// api -> 界面 -> 交互反馈
				uni.showActionSheet({
					itemList: this.changeLooks,
					success:  (res) => {
						this.yinsi = res.tapIndex
					}
				})
			},
			upload(item) { // 上传图片
				this.imglist.push(item.url)
				this.imglistIds.push({ id: item.id })
			},
			delImageList(index) { // 删除图片
				this.imglist.splice(index, 1)
				this.imglistIds.splice(index, 1)
			},
			closePopup() { // 关闭弹窗
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-flex{
		flex:1;
	}
	textarea {
		boder: 1rpx solid #000;
	}
	.popup-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 15px;
		width: 550rpx;
		.img-content {
			width: 100%;
			flex: 1;
			image {
				width: 80%;
			}
		}
		.text-pad {
			margin: 20rpx 0;
		}
		.btn-con {
			background-color: #FFE22D;
			color:#3d3d3d;
		}
	}
	.addinput-foot{
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		border-top: 1rpx solid #DDDDDD;
		view {
			height: 100%;
		}
		.addinput-foot-btn {
			background: #F4F4F4;
		}
	}
</style>
